<template>
  <el-dialog title="问题详细" :visible.sync="show" append-to-body width="800px" @closed="closed">
    <div class="detail-content">
      <div v-loading="infoLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
        <div class="subtitle">问题发现</div>
        <el-descriptions size="small" border :label-style="{ width: '80px' }" :content-style="{ maxWidth: '250px' }">
          <el-descriptions-item label="所属项目">{{ info.projectName }}</el-descriptions-item>
          <el-descriptions-item label="问题来源">
            <dict-tag :options="dict.type.cq_route_inspection_type" :value="info.inspectionType" />
          </el-descriptions-item>
          <el-descriptions-item label="问题类型">{{ info.problemName }}</el-descriptions-item>
          <el-descriptions-item label="问题位置">{{ info.positionName }}</el-descriptions-item>
          <el-descriptions-item label="问题等级">
            <dict-tag :options="dict.type.cq_route_inspection_serious_level" :value="info.seriousLevel" />
          </el-descriptions-item>
          <el-descriptions-item label="问题状态">
            <dict-tag :options="dict.type.cq_route_inspection_status" :value="info.status" />
          </el-descriptions-item>
          <el-descriptions-item label="发现人">{{ info.discovererName }}</el-descriptions-item>
          <el-descriptions-item label="发现时间">{{ info.createTime }}</el-descriptions-item>
          <el-descriptions-item label="整改期限">{{ info.deadline ? `${info.deadline}天` : '' }}</el-descriptions-item>
          <el-descriptions-item label="责任人">{{ info.responsibleName }}</el-descriptions-item>
          <el-descriptions-item label="问题描述" :span="2">{{ info.description || '暂无描述' }}</el-descriptions-item>
          <el-descriptions-item label="问题附件" :span="3">
            <MediaList :list="info.picList" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div v-for="(item, index) in recordList" :key="index">
        <div class="subtitle">{{ item.operateName }}详情</div>
        <el-descriptions size="small" :label-style="{ whiteSpace: 'nowrap' }" :content-style="{ maxWidth: '250px' }">
          <el-descriptions-item :label="`${item.operateName}人`" :label-style="{ width: '50px' }">{{ item.creatorName }}</el-descriptions-item>
          <el-descriptions-item :label="`${item.operateName}时间`" :span="item.operateType === 2 ? 1 : 2">{{ item.createTime }}</el-descriptions-item>
          <el-descriptions-item label="状态" v-if="item.operateType === 2">
            <dict-tag :options="dict.type.cq_route_inspection_status" :value="item.status" style="margin-top: -3px" />
          </el-descriptions-item>
          <el-descriptions-item :label="`${item.operateName}描述`" :span="3">{{ item.description || item.remark || '暂无描述' }}</el-descriptions-item>
          <el-descriptions-item :label="`${item.operateName}附件`" :span="3">
            <MediaList :list="item.picList" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>
<script>
// 日常巡查详情
import { listRouteInspection, listRouteInspectionRecord } from '@/api/cq/routeInspection'
import MediaList from './MediaList'
export default {
  components: { MediaList },
  dicts: ['cq_route_inspection_type', 'cq_route_inspection_serious_level', 'cq_route_inspection_status'],
  data() {
    return {
      show: false,
      inspectionId: '',
      infoLoading: false,
      info: {},
      recordLoading: false,
      recordList: []
    }
  },
  methods: {
    closed() {
      this.info = {}
      this.recordList = []
    },
    open(data = {}) {
      this.show = true
      this.inspectionId = data.inspectionId || ''
      this.getInfo()
      this.getRecordList()
    },
    async getInfo() {
      const { inspectionId } = this
      if (!inspectionId) return

      const opt = { inspectionId, pageSize: 1 }
      this.infoLoading = true
      const res = await listRouteInspection(opt).catch(() => false)
      this.infoLoading = false
      if (res === false) return

      this.info = res.rows?.[0] || {}
    },
    async getRecordList() {
      const { inspectionId } = this
      if (!inspectionId) return

      const opt = { inspectionId, pageSize: 1e4 }
      this.recordLoading = true
      const res = await listRouteInspectionRecord(opt).catch(() => false)
      this.recordLoading = false
      if (res === false) return

      const data = res.rows || []
      data.map(i => {
        i.operateName = i.operateType === 1 ? '整改' : i.operateType === 2 ? '验收' : i.operateType === 3 ? '退回' : '处理'
        i.picList = i.picList || []
      })
      this.recordList = data
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-content {
  min-height: 300px;
  max-height: calc(88vh - 100px);
  overflow-y: auto;
  margin-top: -30px;
  .subtitle {
    background-color: #f9fafc;
    padding: 5px 10px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
